<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>外边距合并-嵌套块级元素垂直外边距塌陷</title>
    <style>
      /* 如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，这种叫嵌套块元素垂直外边距的合并 */
      .father {
        width: 400px;
        height: 400px;
        background-color: purple;
        margin-top: 50px;
        /* 解决方案1：给父元素定义1像素的上边框(如果不想显示边框，将颜色设置为`transparent`即可) */
        /* border: 1px solid red; */
        /* border: 1px solid transparent; */

        /* 解决方案2：给父元素定义1像素的上内边距 */
        /* padding: 1px; */

        /* 解决方案3：给父元素添加 overflow: hidden; 属性 */
        overflow: hidden;
      }
      .son {
        width: 200px;
        height: 200px;
        background-color: pink;
        margin-top: 100px;
      }
    </style>
  </head>
  <body>
    <div class="father">
      <div class="son"></div>
    </div>
  </body>
</html>
